.app-header{
  position:relative;
  width:100%;
  background-color:#fff;
  .app-header-navbar{
    height:60px;
    z-index:999;
  }
  .app-header-main{
    display:flex;
    align-items:center;
    height:inherit;
    margin:0 auto;
    .app-header-logo{
      display:flex;
      align-items:center;
      width:180px;
      min-width:180px;
      span{
        font-size:24px;
        font-weight:700;
        flex-grow:1;
        color:#3c4248;
      }
    }
    .app-header-nav{
      flex:1;
      margin-left:80px;
    }
    .nav-link.router-link-active{
      color:var(--theme-black);
      &::after{
        position:absolute;
        right:0;
        bottom:-20px;
        left:0;
        height:4px;
        background:var(--theme-color);
        content:"";
      }
    }
    .nav-link{
      margin:0 15px;
      font-size:.9375rem;
      word-spacing:2px;
      letter-spacing:1px;
      color:#8590a6;
      position:relative;
    }
  }
  .app-header-search{
    width:360px;
    margin-right:30px;
    position:relative;
    .search-input{
      outline:none;
      position:relative;
      display:block;
      border:1px solid #ececec;
      padding:5px 25px;
      width:100%;
      border-radius:500px;
      background-color:transparent;
      transition:all .3s ease-out;
    }
    .search-to{
      background-color:var(--theme-color);
      font-size:16px;
      font-weight:700;
      height:35px;
      line-height:35px;
      padding:0;
      position:absolute;
      right:0;
      text-align:center;
      top:0;
      border-radius:0 50% 50% 0;
      width:38px;
      z-index:9;
      color:#fff;
    }
  }
  .app-header-user{
    display:flex;
    justify-content:flex-end;
    a{
      color:#8590a6;
    }
    .el-dropdown{
      line-height:inherit;
    }
  }
}
.nav{
  display:flex;
  flex-wrap:wrap;
  padding-left:0;
  margin-bottom:0;
  list-style:none;
}
@media (min-width:1260px){
  .app-header-main{
    width:1170px
  }
}
@media (min-width:1500px){
  .app-header-main{
    width:1410px
  }
}
.app-footer{
  width:100%;
  border-top:1px solid #ececec;
  height:76px;
  line-height:76px;
  background-color:#fff;
  .nav{
    display:flex;
    flex-wrap:wrap;
    padding-left:0;
    margin-bottom:0;
    list-style:none;
    a{
      color:#333;
      padding:0 1rem;
      &:hover{
        color:var(--theme-orange);
      }
    }
  }
}
.app-footer-logo{
  a{
    svg{
      transition:all 0.6s;
    }
    &:hover{
      svg{
        transform:rotate(-360deg);
      }
    }
  }
}
.app-body{
  min-height:calc(100vh - 201px);
}
.animate__animated{
  --animate-duration:.6s;
}
.showInUp{
  -webkit-animation:showInUp .35s;
  animation:showInUp .35s
}
@-webkit-keyframes showInUp{
  0%{
    opacity:0;
    -webkit-transform:translate3d(0, 50px, 0);
    transform:translate3d(0, 50px, 0)
  }
  to{
    opacity:1;
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
  }
}
@keyframes showInUp{
  0%{
    opacity:0;
    -webkit-transform:translate3d(0, 50px, 0);
    transform:translate3d(0, 50px, 0)
  }
  to{
    opacity:1;
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
  }
}
.app-sidebar{
  .app-sidenav-item{
    border-radius:10px;
    background-color:#fff;
    box-shadow:0 5px 10px #e8e8e8;
    overflow:hidden;
    .el-menu{
      border:0;
    }
    .sidenav-title{
      position:relative;
      display:flex;
      align-items:center;
      font-size:16px;
      font-weight:500;
      height:45px;
      line-height:45px;
      padding:0 15px;
      color:#999;
      border-bottom:1px solid #e3e3e3;
    }
  }
}
//container
.container{
  margin-left:auto;
  margin-right:auto;
}
// admins
.app-admins-col{
  margin-bottom:30px;
  .el-card{
    .image{
      width:100%;
      height:135px;
      border:1px solid #efefef;
    }
  }
  .title{
    h3{
      @include ellipsisNum(2);
      line-height:24px;
      font-size:16px;
      font-weight:normal;
      min-height:48px;
    }
  }
  .time{
    color:#ccc;
    white-space:nowrap;
  }
}
.app-page-admin{
  .app-admin-body{
    min-height:calc(100vh - 190px);
  }
  .meta{
    .author{
      color:var(--el-color-success);
    }
  }
}
.app-admin-banner{
  background:#00c5db;
  background:linear-gradient(to right, #00c5db 0%, #e93cec 100%);
}
.app-page-banner.app-hooks-banner{
  background:#00c5db;
  background:linear-gradient(to right, #070478 0%, #0ad6ff 100%);
  .banner-text{
    .admin-btn{
      color:#1e5eaa;
      box-shadow:0 0 16px #1e5eaa;
    }
  }
}
.app-page-banner.app-ui-banner{
  background:#b0cf1a;
  //background: linear-gradient(to right, #eae507 0%, #339500 100%);
  background:linear-gradient(to right, #1fb351 0%, #b0cf1a 100%);
  .banner-text{
    .admin-btn{
      color:#1fb351;
      box-shadow:0 0 16px #1fb351;
    }
  }
}
.app-page-banner.app-uniapp-banner{
  background:#b0cf1a;
  background:linear-gradient(to right, #5d76b9 0%, #1900ff 100%);
  .banner-text{
    .admin-btn{
      color:#1900ff;
      box-shadow:0 0 16px #1900ff;
    }
  }
}
.app-page-banner.app-cli-banner{
  background:#ec0279;
  background:linear-gradient(to right, #ec0279 0%, #f8ff2bd1 100%);
  .banner-text{
    .admin-btn{
      color:#ec0279;
      box-shadow:0 0 16px #ec0279;
    }
  }
}
.app-dialog{
  --el-dialog-margin-top:8vh;
  .el-dialog__body{
    padding-bottom:0;
    padding-right:35px;
    padding-top:20px;
  }
}
.dialog-form{
  .el-form-item{
    &:last-child{
      margin-bottom:0;
    }
  }
}
.app-card-item{
  .image-slot{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    background:var(--el-fill-color-light);
    color:var(--el-text-color-secondary);
    font-size:30px;
  }
  .image-slot .svg{
    font-size:30px;
  }
  .author{
    .name{
      @include ellipsis(105px);
    }
  }
}
.app-aside-collapse{
  border-top:0;
  .el-collapse-item{
    &:last-child{
      .el-collapse-item__wrap{
        border-bottom:0;
      }
    }
  }
  .el-collapse-item__header{
    overflow:hidden;
    line-height:30px;
  }
}
.app-readme-content{
  min-height:calc(100vh - 640px);
  padding-bottom:20px;
}
.app-detail-header{
  .card-header{
    .time{
      font-size:12px;
      color:var(--el-text-color-secondary);
      white-space:nowrap;
    }
  }
}
.app-share-bar{
  position:fixed;
  margin-top:80px;
  margin-left:7rem;
  z-index:2;
  .action-btn{
    width:48px;
    height:48px;
    margin-bottom:20px;
    background-color:#fff;
    display:flex;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    &.on{
      .icon{
        color:#1e80ff;
      }
    }
    .icon{
      font-size:20px;
      color:#8a919f;
    }
    &.share-more{
      &:hover{
        .action-share-popup{
          display:block;
        }
      }
    }
  }
}
.app-share-bar .action-btn.ui-animation .icon:hover{
  animation:headShake .5s linear 1;
}
.action-btn.with-badge:after{
  content:attr(badge);
  position:absolute;
  top:0;
  left:75%;
  height:17px;
  line-height:17px;
  padding:0 5px;
  border-radius:9px;
  font-size:11px;
  text-align:center;
  white-space:nowrap;
  background-color:var(--theme-orange);
  color:#fff;
}
.action-share-popup{
}
.action-share-popup:after{
  position:absolute;
  width:0;
  height:0;
  content:" ";
  right:100%;
  top:20px;
  border:6px solid transparent;
  border-right-color:#fff;
}
.action-share-popup .share-item{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 15px;
  cursor:pointer;
  color:var(--vp-c-gray-light-1);
  &:hover{
    color:var(--vp-c-gray-dark-3);
  }
}
.action-share-popup .share-item:hover{
  background-color:#f2f3f5;
}
.action-share-popup .share-item .share-item-title{
  margin-left:8px;
  font-size:14px;
  color:#515767;
}
.wechat-qrcode{
  display:none;
  flex-direction:column;
  align-items:center;
  position:absolute;
  top:-13px;
  left:calc(100% + 13px);
  border-radius:4px;
  background-color:#fff;
  padding:10px 15px 8px;
  box-shadow:0 8px 24px rgba(81, 87, 103, .16);
}
.action-share-popup .share-item:hover.wechat .wechat-qrcode{
  display:flex;
}
.wechat-qrcode .wechat-qrcode-img{
}
.wechat-qrcode .wechat-qrcode-title{
  font-size:14px;
  line-height:22px;
  color:#515767;
  margin-top:8px;
}
.app-aside-collapse{
  .author{
    @include ellipsis(50%);
  }
}
.app-icon-top{
  width:40px;
  height:40px;
  background:url(~~/assets/images/icon-top.png) 0 0 no-repeat;
  background-size:cover;
  top:0;
  left:0;
  z-index:33;
}
.app-collapse-base{
  .el-descriptions__label{
    color:#c0c0c0;
  }
  a{
    color:var(--el-color-success);
  }
}
.el-pagination{
  .el-input__wrapper{
    margin-right:8px;
  }
}
.app-page-about{
  border:1px solid #fafafa;
  min-height:calc(100vh - 260px);
}
.app-about-content{
  line-height:40px;
}
.about-main{
  color:#999;
  h2{
    color:#333;
  }
}
//home
.app-home-hero{
  padding:30px 0 20px;
  .container{
    max-width:1100px !important;
    .main{
      width:68%;
      .text{
        color:var(--vp-c-text-1);
        max-width:576px;
        font-size:33px;
        font-weight:bold;
        margin-top:-7px;
      }
      .tagline{
        font-size:18px;
        padding-top:10px;
      }
    }
  }
  .actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    padding-top:10px;
  }
  .image{
    padding-top:26px;
  }
}
.app-home-body{
  padding-bottom:1rem;
  min-height:calc(100vh - 350px);
  .container{
    max-width:1100px;
    gap:20px;
  }
  .meta{
    .time{
      font-size:14px;
      white-space:nowrap;
      position:relative;
      top:1px;
    }
  }
  .app-admins-col{
    margin-bottom:0;
  }
  .side{
    width:300px;
  }
  .main{
    flex:1;
  }
}
.app-body-title{
  padding-top:10px;
  padding-bottom:5px;
  line-height:30px;
  h1{
    font-weight:bold;
  }
  a{
    color:var(--el-color-primary);
    svg{
      transition:all 0.6s;
      position:relative;
      top:-2px;
    }
    &:hover{
      color:var(--theme-orange);
    }
  }
  a.title{
    &:hover{
      svg{
        transform:rotate(-360deg);
      }
    }
  }
  a.more{
    svg{
      font-size:18px;
      color:#ccc;
      right:0;
    }
    &:hover{
      svg{
        color:var(--theme-orange);
        right:-6px;
        transform:scale(1.2);
      }
    }
  }
}
.app-home-admin{
}
.el-image{
  border:1px solid #efefef;
  img{
    transition:all 0.5s;
    &:hover{
      transform:scale(1.2);
      z-index:1;
    }
  }
}
.app-page-error{
  min-height:calc(100vh - 200px);
}
.app-error-icon{
  --el-result-icon-font-size:200px;
  --el-result-icon-font-size:200px;
  .icon{
    font-size:150px;
    color:var(--el-color-primary);
  }
}
.app-page-search{
  .search-title{
    position:absolute;
    right:0;
    bottom:0;
    margin-bottom:0;
  }
}
.app-row-version{
  .el-radio--large{
    height:32px;
  }
}
.search-title-txt{
  .search-icon{
    color:var(--theme-green);
    margin-top:-3px;
    font-size:17px;
  }
  i{
    color:var(--theme-orange);
    font-weight:bold;
  }
}
.app-toc-card{
  top:20px;
  z-index:1;
  .el-card__body{
    padding:20px 10px 20px 0;
  }
}
